<template>
	<div>
		<div class="menu">
			<ButtonGroup :items="type" @onChange="getList" />
			<List :list="list" class="list" />
			<Pagination :total="total" :onChange="getList" />
		</div>
	</div>
</template>

<script>
import ButtonGroup from '@/components/ButtonGroup.vue';
import Pagination from '@/components/Pagination.vue';
import List from '@/components/List.vue';
import { getType, getList } from '@/services/index';

export default {
	name: "App",
	components: {
		ButtonGroup,
		Pagination,
		List
	},
	data() {
		return {
			list: [],
			type: [],
			total: 0,
			params: {
				page: 1,
				id: '1',
			}
		}
	},
	mounted() {
		getType().then(type => {
			this.type = type.data
		})
		this.getList({ page: 1 })
	},
	methods: {
		getList(params) {
			Object.assign(this.params, params)
			console.log({ ...this.params })
			getList({ ...this.params }).then(list => {
				this.total = list.data.total
				this.list = list.data.data
			})
		}
	}
};
</script>
<style lang="less" scoped>
.menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;

	.list {
		width: 60%;
	}
}
</style>
